<!--固件详情-->
<template>
  <div class="firmware-develop-details">
    <div class="header">
      <div class="header-left">
        <div class="top">
          <span class="back" @click="goBack"><i class="iconfont icon-fanhui" style="font-size: 24px;"></i></span>
          <span class="title">{{ productName }}</span>
        </div>
        <div class="version">版本号：{{ version }}</div>
      </div>
      <div class="status">
        <div class="status-icon"></div>
        <div>{{ state }}</div>
      </div>
    </div>
    <div class="tab">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1"><span>固件详情</span></el-menu-item>
        <el-menu-item index="2"><span>测试任务</span></el-menu-item>
        <el-menu-item index="3"><span>升级任务</span></el-menu-item>
      </el-menu>
      <div class="content">
        <div v-show="activeIndex == '1'" class="content-detail">
          <firmwareDetails></firmwareDetails>
        </div>
        <div v-show="activeIndex == '2'">
          <testDetails></testDetails>
        </div>
        <div v-show="activeIndex == '3'">
          <upgradeTask></upgradeTask>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import firmwareDetails from "./components/firmwareDetails"
import testDetails from "./components/testDetails"
import upgradeTask from "./components/upgradeTask"
export default {
  name: 'firmwareDevelopDetails',
  components: { firmwareDetails, testDetails, upgradeTask },
  data() {
    return {
      activeIndex: '1',
      tableData: [],
      productName: '', //当前产品名字
      version: '', //当前固件版本
      state: '', //当前固件状态
      stateList: [ //状态
        { value: '0', label: "开发中" },
        { value: '1', label: "已上线" }
      ]
    }
  },
  mounted() {
    this.productName = this.$route.query.productName
    this.version = this.$route.query.version
    const currentState = { state: this.$route.query.state }
    this.state = this.statusFormatter(currentState)
    this.activeIndex = this.$route.query.index || '1'
  },
  methods: {
    //状态格式化
    statusFormatter(val) {
      const label = this.stateList.find((option) => option.value === val.state).label || "-"
      return label
    },
    goBack() {
      this.$router.go(-1)
    },
    handleSelect(key) {
      this.activeIndex = key
    }
  }
}
</script>
<style lang="scss" scoped>
.firmware-develop-details {

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .header-left {
      .top {
        display: flex;
        align-items: center;

        .back {
          margin-right: 13px;
          cursor: pointer;
        }

        .title {
          font-size: 16px;
          font-weight: 600;
          color: #252525;
        }
      }

      .version {
        margin-top: 8px;
        font-weight: 400;
        color: #808080;
        font-size: 14px;
      }
    }

    .status {
      padding: 3px 8px;
      background: rgba(12, 163, 209, 0.15);
      border-radius: 18px 18px 18px 18px;
      display: flex;
      align-items: center;
      font-weight: 400;
      color: #0CA3D1;
      font-size: 14px;

      .status-icon {
        width: 6px;
        height: 6px;
        background: #0CA3D1;
        border-radius: 6px;
        margin-right: 6px;
      }
    }
  }

  .tab {
    height: calc(100% - 106px);

    .el-menu-item {
      font-weight: 600;
      color: #808080;
      height: 36px;
      line-height: 36px;
      width: 157px;
      text-align: center;
      border-bottom: none;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: 1px solid #DEDEDE;
    }

    span {
      height: 34px;
      line-height: 36px;
    }

    .el-menu-item.is-active {
      color: #275FE8;
      border-bottom: none;

      span {
        display: inline-block;
        border-bottom: 2px solid #275FE8;
      }
    }

    .content {
      height: calc(100% - 37px);

      .content-detail {
        height: 100%;
      }
    }
  }
}
</style>
